<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>咕咕咕借贷平台</title>
</head>
<link rel="stylesheet" href="css/layui.css" media="all">
<body>
<ul class="layui-nav">
    <li class="layui-nav-item  layui-this"><a href="">首页</a></li>
    <li class="layui-nav-item">
        <a href="javascript:;">我的账户</a>
        <dl class="layui-nav-child">
            <dd><a href="">实名认证</a></dd>
            <dd><a href="">风控材料认证</a></dd>
            <dd><a href="">银行卡管理</a></dd>
            <dd><a href="">登录记录</a></dd>
            <dd><a href="">个人资料</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item"><a href="">账户充值</a></li>

    <li class="layui-nav-item">
        <a href="javascript:;">资明细查询</a>
        <dl class="layui-nav-child">
            <dd><a href="">还款明细</a></dd>
            <dd><a href="">充值明细</a></dd>
            <dd><a href="">提现申请</a></dd>

        </dl>
    </li>
    <li class="layui-nav-item" lay-unselect="">
        <a href="javascript:;"><img src="//t.cn/RCzsdCq" class="layui-nav-img">本账号</a>
        <dl class="layui-nav-child">
            <dd><a href="javascript:;">修改信息</a></dd>
            <dd><a href="javascript:;">安全管理</a></dd>
            <dd><a href="javascript:;">注销</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item"><a href="">帮助</a></li>
</ul>

<div class="layui-carousel" id="test1" lay-filter="test1">
    <div carousel-item="">
        <div><img src="img/xmad_15565398421566_aihJA.jpg" height:"500px" width:"1080px"> </div>
        <div><img src="img/xmad_15566146318197_mAghl.jpg" height:"500px" width:"1080px"> </div>
        <div><img src="img/xmad_15574198038169_xvodz.jpg" height:"500px" width:"1080px"> </div>

    </div>
</div>

<table class="layui-table" lay-data="{width: 1280, height:330, url:'/demo/table/user/', page:true, id:'idTest'}"
       lay-filter="demo">
    <thead>
    <tr>

        <th lay-data="{field:'username', width:100}">借款人</th>
        <th lay-data="{field:'sex', width:180, }">借款标题</th>
        <th lay-data="{field:'city', width:100,sort: true}">年利率</th>
        <th lay-data="{field:'sign', width:160,sort: true}">金额</th>
        <th lay-data="{field:'experience', width:100}">还款方式</th>

        <th lay-data="{field:'classify', width:100,sort: true}">借款期限</th>
        <th lay-data="{field:'wealth', width:135, sort: true}">进度</th>
        <!-- <th lay-data="{field:'score', width:80, sort: true, fixed: 'right'}">评分</th> -->
        <th lay-data="{fixed: 'right', width:178, align:'center', toolbar: '#barDemo'}"></th>
    </tr>
    </thead>
</table>

</body>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script src="layui/layui.js" charset="utf-8"></script>
<script>
    layui.use('element', function(){
        var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块

        //监听导航点击
        element.on('nav(demo)', function(elem){
            //console.log(elem)
            layer.msg(elem.text());
        });

        var carousel = layui.carousel
            ,form = layui.form;


    });
    layui.use(['carousel', 'form'], function(){
        var carousel = layui.carousel
            ,form = layui.form;

        //常规轮播
        carousel.render({
            elem: '#test1'
            ,interval: 1800
            ,anim: 'fade'
            ,height: '400px'
            ,width:'100%'

        });
    });

    $('.demoTable .layui-btn').on('click', function(){
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
    });
</script>


<script>
    layui.use('table', function(){
        var table = layui.table;
        //监听表格复选框选择
        table.on('checkbox(demo)', function(obj){
            console.log(obj)
        });
        //监听工具条
        table.on('tool(demo)', function(obj){
            var data = obj.data;
            if(obj.event === 'detail'){
                layer.msg('ID：'+ data.id + ' 的查看操作');
            } else if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    obj.del();
                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
                layer.alert('编辑行：<br>'+ JSON.stringify(data))
            }
        });



        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
</script>

</html>
